<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
	xmlns:fb="https://www.facebook.com/2008/fbml">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/demo.css?v=2">
	<link rel="stylesheet" href="css/jquery.bxslider.css">
	
	
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/demo.js"></script>
	<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
	<script type="text/javascript" src="js/textEffect.jquery.js"></script>
	<style type="text/css">
		body{min-height: 720px; margin: 0px;padding: 0px; background: #eee; background: url(images/mainBg.jpg) center top no-repeat;}
		#header{margin: 0px auto; text-align: center; margin-top: 20px; padding: 20px;}
		#wrapper{width: 950px; margin: 0px auto; position: relative;}
		#wrapButtons{width: 420px;  position: absolute; top: 50px; left: 0px;}
		.buttonOS{float: left; margin-right: 5px;}
		#wrapButtons h2{width: 197px; height: 67px; margin: 3px 0px;}
		#wrapButtons h2 a{text-indent: -9999px; display: block; cursor: pointer; width: 196px; height: 67px;}
		#wrapButtons h2 a:hover{}
		
   		@-webkit-keyframes fadein { /* Safari and Chrome */
    		from {
        		opacity:0;
    		}
    		to {
        		opacity:1;
    		}
		}
		
		@-webkit-keyframes bp { /* Safari and Chrome */
		    from {
		        background-position:-300px -50px;
		    }
		    to {
		        background-position:0px 0px;
		    }
		}

		@-webkit-keyframes bp1 { /* Safari and Chrome */
		    from {
		        background-position:-800px 0px;
		    }
		    to {
		        background-position:-199px -70px;
		    }
		}

		#androidOS h2 a{background: url(images/buttonGroup.png) 0px 0px no-repeat;}
		#androidOS h2 a:hover{
			background: url(images/buttonGroup.png) 0px -70px no-repeat;
			-moz-animation: fadein 1.5s, bp 0.5s; /* Firefox */
   			-webkit-animation: fadein 1s, bp 0.3s; /* Safari and Chrome */
   			-o-animation: fadein 1s, bp 0.5s;
		}
		
		#iosOS h2 a{
			background: url(images/buttonGroup.png) -199px 0px no-repeat;
   		}
   		
		#iosOS h2 a:hover{
			background: url(images/buttonGroup.png) -199px -70px  no-repeat;
			-moz-animation: fadein 1.5s, bp1 0.5s; /* Firefox */
   			-webkit-animation: fadein 1s, bp1 0.3s; /* Safari and Chrome */
   			-o-animation: fadein 1s, bp1 0.5s;
		}
		
		#windowOS h2{background: url(images/buttonGroup.png) -396px 0px no-repeat; opacity: 0.6;}
		#windowOS h2 a:hover{
			background: url(images/buttonGroup.png) -396px -70px  no-repeat;
			-moz-animation: fadein 1.5s, bp2 0.5s; /* Firefox */
   			-webkit-animation: fadein 1s, bp2 0.3s; /* Safari and Chrome */
   			-o-animation: fadein 1s, bp2 0.5s;
		}
		
		#javaOS h2{background: url(images/buttonGroup.png) -595px 0px no-repeat; opacity: 0.6;}
		#javaOS h2 a:hover{background: url(images/buttonGroup.png) -595px -70px  no-repeat;}
		
		#textIntro{position: absolute; top: 230px; left: 0px; color: #fafafa; width: 340px;}
		#textIntro h1{font-size: 40px;  font-family: Segoe UI, Tahoma, Arial, Sans-serif; margin-bottom: 20px;}
		#textIntro p{color: #eee;font-family: tahoma, arial, sans-serif; font-size: 22px; font-family: Segoe UI, Tahoma, Arial, Sans-serif;}
		.notAvailable{opacity: 0.5px;}
	</style>
</head>

<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
	<div id="wrapper">
		<div id="header">
		
		</div>
		<div id="body">
			<div id="wrapper">
				<div id="wrapButtons">
					<div id="androidOS" class="buttonOS">
						<h2><a href="#">Android</a></h2>
					</div>
					
					<div id="iosOS" class="buttonOS">
						<h2><a href="#"><img src="" alt="IOS" /></a></h2>
					</div>
					
					<div id="windowOS" class="buttonOS">
						<h2></h2>
					</div>
					
					<div id="javaOS" class="buttonOS">
						<h2></h2>
					</div>
				</div>
				
				<div id="textIntro">
					<h1>Mobik.vn</h1>
					<p>Cộng đồng chia sẻ Apps và Games lớn nhất Việt Nam.</p>
				<script>
					jQuery(document).ready(function($) {
						$('#textIntro > h1').textEffect({
						 effect: 'slide',// the type of the text aniamtion. fade, glow, jumble, slide, dropdown and random (default)
						effectSpeed: 150, // the speed in ms at which new letters begin to animate.
						completionSpeed: 2000, // the speed in ms of the text aniamtion.
						jumbleColor: '#7f7f7f' // the color of the jumbled letters.
					});
						
					$('#textIntro > p').textEffect({
						effect: 'slide', // the type of the text aniamtion. fade, glow, jumble, slide, dropdown and random (default)
						effectSpeed: 40, // the speed in ms at which new letters begin to animate.
						completionSpeed: 2000, // the speed in ms of the text aniamtion.
						jumbleColor: '#7f7f7f' // the color of the jumbled letters.
						});
					
					});
				</script>
				</div>
			</div>
			
		</div><!-- end #body -->
		<div class="clr"></div>

		






	</div>
	<!-- end #wrapper -->

</body>

</html>